<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>监视数据的变化：$watch</title>
	<script src="js/vue.js"></script>
</head>
<body>
	<div id="itany">
		<input type="text" v-model="name">
		<h3>{{name}}</h3>
		<hr>
		
		<input type="text" v-model="age">
		<h3>{{age}}</h3>
		<hr>

		<input type="text" v-model="user.name">
		<h3>{{user.name}}</h3>
	</div>

	<script>
		var vm=new Vue({
			el:'#itany',
			data:{
				name:'tom',
				age:23,
				user:{
					id:1001,
					name:'alice'
				}
			},
			watch:{ //方式2：使用vue实例提供的watch选项
				age:(newValue,oldValue) => {
					console.log('age被修改啦，原值：'+oldValue+'，新值：'+newValue);
				},
				user:{
					handler:(newValue,oldValue) => {
						console.log('user被修改啦，原值：'+oldValue.name+'，新值：'+newValue.name);
					},
					deep:true //深度监视，当对象中的属性发生变化时也会监视
				}
			}
		});

		//方式1：使用vue实例提供的$watch()方法
		vm.$watch('name',function(newValue,oldValue){
			console.log('name被修改啦，原值：'+oldValue+'，新值：'+newValue);
		});

	</script>
	
</body>
</html>